<!-- 搜索+筛选 -->
<template>
    <view class='flex padding-xs solid-bottom filters'>
        <picker 
            :class="['flex-sub', 'align-center', 'radius', 'bg-gray', 'city-picker-wrap', choosedLocation.districtName ? 'is-active' : '']" 
            @change="locationPickerChange" 
            :range="districtList" 
            range-key="districtName"
        >
            <view class="city-picker-content">
                {{ choosedLocation.districtName ? choosedLocation.districtName : '地点' }}
                <text class='icon-unfold'></text>
            </view>
        </picker>
        <picker 
            :class="['flex-sub', 'align-center', 'radius', 'bg-gray', 'city-picker-wrap', choosedSettlement.name ? 'is-active' : '']"
            @change="settlementPickerChange" 
            :range="settlementList" 
            range-key="name"
        >
            <view class="city-picker-content">
                {{ choosedSettlement.name  ? choosedSettlement.name : '职位类型' }}
                <text class='icon-unfold'></text>
            </view>
        </picker>
        <picker 
            :class="['flex-sub', 'align-center', 'radius', 'bg-gray', 'city-picker-wrap', choosedSalary.name ? 'is-active' : '']"
            @change="slaryPickerChange" 
            :range="slaryRank" 
            range-key="name"
        >
            <view class="city-picker-content">
                {{ choosedSalary.name ? choosedSalary.name : '薪资' }}
                <text class='icon-unfold'></text>
            </view>
        </picker>
    </view>
</template>

<script>
import {
    getDistrictList,
    getSettlementList,
} from '../model/result.model';

export default {
    props: {
        searchParam: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            locationSync: false,
            settlementSync: false,
            choosedLocation: {},
            choosedSettlement: {},
            choosedSalary: {},
            sortRank: 0,
            slaryRank: [
                {key: 'desc', name: '由高到低'},
                {key: 'asc', name: '由低到高'}
            ]
        };
    },
    created() {
        // getDistrictList(); // 获取区县列表
        getSettlementList();// 获取结算方式
    },

    computed: {
        districtList() {
            return this.$store.state.districtList || [];
        },
        settlementList() {
            return this.$store.state.settlementList || [];
        },
    },
    watch: {
        '$store.state.currentCity': {
            handler() {
                if(this.$store.state.currentCity.cityId) {
                    this.choosedLocation = {}; // 清空已选的地区
                    this.searchParam.sortParam.location = '';
                    getDistrictList({
                        cityId: this.$store.state.currentCity.cityId
                    }); // 获取区县列表
                }
                
            },
            immediate: true
        },
        
    },
    methods: {
        locationPickerChange(e) {
            let index = (+e.target.value);
            this.choosedLocation = this.districtList[index];
            this.searchParam.pageParam.page = 1;
            this.searchParam.sortParam.location = this.choosedLocation.districtId;
        },
        settlementPickerChange(e) {
            let index = (+e.target.value);
            this.choosedSettlement = this.settlementList[index];
            this.searchParam.pageParam.page = 1;
            this.searchParam.sortParam.settlement = this.choosedSettlement.id;
        },
        slaryPickerChange(e) {
            let index = (+e.target.value);
            this.choosedSalary = this.slaryRank[index];
            this.searchParam.pageParam.page = 1;
            this.searchParam.sortParam.salary = this.choosedSalary.key;
        }
    },
};

</script>
<style lang='less' scoped>
.filters {
    height: 80rpx;
    margin-top: 0;
    color: #666;
    background-color: #fff;
    cursor: pointer;
    .city-picker-wrap {
        margin: auto 10rpx;
        .city-picker-content {
            text-align: center;
            padding: 15rpx;
            font-size: 25rpx;
        }
    }
    
    .is-active {
        color: #2196f3 !important;
    }
}
</style>
